<template>
  <div style="width: 100%; height: 100%; display: flex; justify-content: center;">
  <div style="width: 1200px; height: 100%; background-color: #f5fdfd;" class="animate__animated animate__slideInDown">
    <div align="center" style="width: 1200px; height: 10%; display: flex; justify-content: center; align-items: center">
      <div style="width: 600px;">
        <el-input v-model="search" placeholder="请输入词库名" style="width: 450px;"></el-input>
        <el-button type="primary" style="margin-left: 30px; width: 120px" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div style="height: 89.9%; width: 1200px; background-color: #f5fdfd;border-top: #d4d4d4 1px solid; overflow:hidden;">
      <div style="height: 100%; width: 1220px; overflow-x: hidden; overflow-y: auto" id="wordList">
        <div style="width: 1200px;">
          <div v-for="(item, index) in wordList" id="wordItem">
            <div style="height: 90%; width: 1150px; border: #cbcbcb 2px dotted">
              <div style="margin: 20px; margin-top: 15px">
                <div style="background-color: #21cbb4;display: flex">
                  <h3 style="line-height: 35px; width: 1023px; margin: 0px">&nbsp;&nbsp;{{ item.title }}</h3>
                  <el-button type="primary" plain icon="el-icon-document" @click="showContent(item.title, item.id)">查看</el-button>
                </div>
                <div style="width: 100%; height: 70px; margin-top: 20px">
                  <span style="color: #6a6868">{{ item.info }}</span>
                </div>
                <div style="width: 100%;">
                  <div style="display: flex">
                    <span>{{ item.createTime }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{ item.author }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <el-rate v-model="item.isCollection" :max="1" :min="0" @change="collectionOrCancel(index)"></el-rate>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="height: 50px; display: flex; align-items: center; justify-content: center">
            <el-pagination
                :hide-on-single-page="true"
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="getPage">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
    <!--  查看详情对话框  -->
    <el-drawer
        :visible.sync="drawer"
        :with-header="false">
      <div style="width: 100%; height: 97%">
        <div style="width: 90%; height: 98%; margin-left: 5%; margin-top: 4%; display: flex; justify-content: center; flex-direction: column">
          <div style="width: 100%">
            <h2 style="text-align: center; margin: 0px">{{ curTitle }}</h2>
          </div>
          <div style="background-color: #c2c2c2; width: 100%; height: 96%; margin-top: 10px; overflow-x: auto; overflow-y: auto; border-radius: 15px">
            <div style="margin-top: 10px; margin-bottom: 10px">
              <div v-for="item in curList" style="display: flex; justify-content: center">
                <p style="text-align: center; background-color: #eeeeee; margin: 5px; line-height: 35px; width: 80%; border-radius: 10px">{{ item }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {GET, POST} from "@/util/HttpUtil";

export default {
  name: "WordsCenter",
  data(){
    return {
      search: '',
      curTitle: '',
      total: 0,
      drawer: false,
      wordList: [],
      curList: [],
      curId: null,
    }
  },
  methods:{
    getPage(index){
      GET("/api/lexicon/list?key=" + this.search + "&page=" + index, (res)=>{
        if(res.code == 200){
          this.wordList = res.data.list;
          this.total = res.data.count;
          document.getElementById('wordList').scrollTop = 0;
        }
      })
    },
    showContent(title, id){
      this.drawer = true;
      if(id == this.curId && this.curList.length > 0) return;
      this.curTitle = title;
      GET("/api/lexicon/lexiconItem?id=" + id, res => {
        if(res.code == 200){
          this.curId = id;
          this.curList = res.data;
        }else {
          this.$message.warning(res.msg);
        }
      })
    },
    collectionOrCancel(index){
      let lexicon = this.wordList[index];
      POST("/api/lexicon/collectionOrCancel?id=" + lexicon.id, res => {
        if(res.code == 200){
          if(lexicon.isShare == 0){
            this.$message.success("词库：【" + lexicon.title + "】 已收藏！");
            this.wordList[index].isShare = 1;
          }else {
            this.$message.warning("词库：【" + lexicon.title + "】 取消收藏！");
            this.wordList[index].isCollection = 0;
            this.wordList[index].isShare = 0;
          }
        }else {{
          this.$message.error(res.msg);
          this.wordList[index].isCollection = this.wordList[index].isShare;
        }}
      })
    },
  },
  created() {
    this.getPage(1);
  }
}
</script>

<style scoped>
#wordItem{
  border-bottom: #d4d4d4 1px solid;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<style>
#wordItem .el-button{
  height: 29px!important;
  width: 80px!important;
  margin-top: 3px;
  padding: 2px;
}
</style>